<template>
  <div class="input-popup">
    <span>区域添加</span>
    <div class="input-content">
      <el-input
        v-model="areaName"
        size="small"
        style="width: 160px"
        placeholder="请输入区域的名字"
      />
      <el-button type="primary" size="small" @click="handleInput"
        >确认</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import {postArea} from '@/api/api'
import {usePostStore} from '@/stores'
const postStore = usePostStore();
const {updatePostAreaResult} = postStore;
const props = defineProps({
  coordinates: {
    type: Array,
    required: true,
  },
});
const areaName = ref("");
const handleInput = async() => {
    if(!areaName.value){
        ElMessage({
            message:"区域的名字不能为空",
            type:"warning",
        })
        return;
    }
    const data = {
        name:areaName.value,
        coordinates:props.coordinates,
    }
    await postArea(data);
    updatePostAreaResult(true);
};
</script>

<style scoped>
.input-popup span {
  font-weight: 600;
}
.input-popup .input-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
</style>
